今天是鐵人賽第三天要來講的這個％(占位)的用法，

本日還是來點負能量，下班還要寫文章好累，不能開心當個小廢物嗎（Ｘ

以下我們還是用例子快速來說明

編譯前
.icon-state { 
transition: background-color ease .2s; margin: 0 .5em; 
} 
.error-icon-state { 
@extend .icon; /*錯誤指定樣式... */ 
} 
.info-icon-state { 
@extend .icon; /* 訊息指定樣式... */ 
}

編譯後
.icon-state, .error-icon-state, .info-icon-state {
  -webkit-transition: background-color ease 0.2s;
  -o-transition: background-color ease 0.2s;
  transition: background-color ease 0.2s;
  margin: 0 0.5em;
}

.error-icon-state {
  /*錯誤指定樣式... */
}

.info-icon-state {
  /* 訊息指定樣式... */
}

上面這個範例，神奇的跟我們預想結果不太一樣，icon-state用來繼承用的，預期不需要讓他編譯出來，神奇他還是有編譯，跟我們設定樣式規則歸類同一群去了，為了不讓我用們共用的屬性編譯出來，這時候就可以使用％placeholder

下面這個範例我們會使用％placeholder

編譯前
%icon-state {
  transition: background-color ease 0.2s;
  margin: 0 0.5em;
}
.error-icon-state {
  @extend %icon-state;
  color: #f00;
  /*錯誤指定樣式... */
}
.info-icon-state {
  @extend %icon-state; 
  /* 訊息指定樣式... */
  color: green;
}
.icon-state {
  width: 40%;
  color: #f00;
}

編譯後
.error-icon-state, .info-icon-state {
  -webkit-transition: background-color ease 0.2s;
  -o-transition: background-color ease 0.2s;
  transition: background-color ease 0.2s;
  margin: 0 0.5em;
}

.error-icon-state {
  color: #f00;
  /*錯誤指定樣式... */
}

.info-icon-state {
  /* 訊息指定樣式... */
  color: green;
}

.icon-state {
  width: 40%;
  color: #f00;
}

透過這樣的佔位符號，讓預設icon-state是設定一個預設狀態，不會有編譯出來屬性跟名稱，增加我們在使用上的彈性，既使我們使用了跟我們共用屬性一樣名字，也是可以正常編譯，如果我們使用＠mixin方式，會在編譯後產生大量重複的狀況，下面我們就用一個簡單例子稍微來看一下，用mixin會產生怎樣結果

編譯前
@mixin icon-state {
  transition: background-color ease 0.2s;
  margin: 0 0.5em;
}
.error-icon-state {
  @include icon-state; /*錯誤指定樣式... */
}
.info-icon-state {
  @include icon-state; /* 訊息指定樣式... */
}

.icon-state {
  width: 40%;
  color: #f00;
}

編譯後
.error-icon-state {
  -webkit-transition: background-color ease 0.2s;
  -o-transition: background-color ease 0.2s;
  transition: background-color ease 0.2s;
  margin: 0 0.5em;
  /*錯誤指定樣式... */
}

.info-icon-state {
  -webkit-transition: background-color ease 0.2s;
  -o-transition: background-color ease 0.2s;
  transition: background-color ease 0.2s;
  margin: 0 0.5em;
  /* 訊息指定樣式... */
}

編譯結束就是這樣一坨，沒有把一些共用屬性抽離出來，而這樣佔位功能可以解決這樣的問題，至於＠mixin和＠extend，我們還是先富奸一下，後面會講到的